<template>
  <el-autocomplete
    ref="searchRef"
    v-model="search"
    :fetch-suggestions="querySearch"
    placeholder="基金代码或名称"
    :highlight-first-item="false"
    class="input-button"
    @select="handleSelect"
    @change="handleChange"
    @keyup.enter.native="handleEnter"
  >
    <template slot="append">
      <el-button type="primary" size="middle" @click="handleEnter">基金搜索</el-button>
    </template>
  </el-autocomplete>
</template>

<script>
import { query } from '@/api/front/fund/fundDataContent'

export default {
  // 首页搜索 后端模糊搜索版本
  name: 'HomeSearch',
  data() {
    return {
      // 搜索关键字
      search: '',
      // 搜索基金选项数据
      funds: [],
      // 搜索返回结果
      callbackArr: []
    }
  },
  watch: {

  },
  mounted() {

  },
  methods: {
    // 远程查询事件
    querySearch(queryString, cb) {
      this.callbackArr = [{ value: '没有这个基金哟~', code: '-1' }]

      if (queryString !== '') {
        // 输入内容
        setTimeout(() => {
          // 接口返回的数据
          let result = []
          // 如果输入的是数字，调用编码查询接口
          const reg = new RegExp('^[0-9]*$')
          if (reg.test(queryString)) {
            query({ codeNumber: queryString }).then(res => {
              result = res.content
              this.callbackArr = this.generateOption(result)
              if (this.callbackArr.length === 0) {
                cb([{ value: '没有这个基金哟~', code: '-1' }])
              } else {
                cb(this.callbackArr)
              }
            }).catch(err => {
              console.log(err)
              cb(this.callbackArr)
            })
          } else {
            // 否则调用名称查询接口
            query({ codeName: queryString }).then(res => {
              result = res.content
              this.callbackArr = this.generateOption(result)
              console.log(this.callbackArr)
              if (this.callbackArr.length === 0) {
                cb([{ value: '没有这个基金哟~', code: '-1' }])
              } else {
                cb(this.callbackArr)
              }
            }).catch(err => {
              console.log(err)
              cb(this.callbackArr)
            })
          }
        })
      } else {
        cb([])
      }
    },
    // 将查询结果转换成选项
    generateOption(result) {
      return result.map(r => { return { 'value': r.codeNumber + ' ' + r.codeName, 'codeNumber': r.codeNumber, 'codeName': r.codeName } })
    },
    // 处理选中事件
    handleSelect(item) {
      // 跳转基金详情页面
      if (item.code !== '-1') {
        this.$router.push(`/detail/${item.codeNumber}`)
      } else {
        // 清空重新输入
        this.search = ''
      }
    },
    // 处理按下回车
    handleEnter() {
      // if (this.search !== '') {
      //   console.log('回车跳转搜索页面，搜索：' + this.search)
      //   this.$router.push({
      //     name: 'search',
      //     query: {
      //       search: this.search
      //     }
      //   })
      // }
    },

    // 处理input值改变
    handleChange() {

    }
  }
}
</script>

<style lang="scss" scoped>

.el-autocomplete {
  //position: absolute;     //移动后不会占用原有位置
  //top: 210px;
  //left: 295px;
  //transition: all 30ms linear;
  ::v-deep .el-input__inner {
    font-size: 15px;
    width: 480px;
    height: 44px;
    line-height: 44px;
    border-radius: 10px 0 0 10px;
    border: 2px solid #e4e4e5;
    border-right: 0;
  }

  ::v-deep .el-input-group__append{
    border: 2px solid #f6743d;
    border-radius: 0 10px 10px 0;
    background: #f6743d;
    font-size: 17px;
    color: #fff;
  }

  ::v-deep .el-input-group__prepend {
    border: 1px solid #2c5be8;
    padding: 10px 30px;
    border-radius: 0 10px 10px 0;
    font-size: 16px;
  }
}

.el-autocomplete.trans {
  //transform: translate(-145px, -190px);
}
.bszs {
  //position: absolute;
  top: 150px;
  left: 540px;
  transition: all 30ms linear;
  &.trans {
    transform: translate(-525px, -128px);
  }
}
</style>
